<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;-webkit-user-select: none;}
			#parent{
				width: 600px;
				height: 600px;
				position:relative;
				background: #2B2B2B;
				margin: 10px auto;
				box-shadow: 1px 1px 1px 3px #2B2B2B;
			}
			#div1{
				width: 50px;
				height: 50px;
				background: red;
				position: absolute;
				top: 250px;
				left: 200px;
				border-radius: 50%;
				z-index: 2;
			}
			#div2 {
				position: absolute;
				width: 150px;
				height: 150px;
				top: 10px;
				left: 20px;
			}
			#div2 img{
				width: 150px;
				height: 150px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="div1"></div>
			<div id="div2">
				<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1305293396,1089587836&fm=27&gp=0.jpg">
			</div>
			
		</div>
		<script>
			//非对象
//			 var oParent = document.getElementById('parent');
//			 var odiv1 = document.getElementById('div1');
//			 var odiv2 = document.getElementById('div2');
//			 odiv1.onmousedown = function (e){
//			 	var e = e||event;
//			 	var disX = e.clientX-odiv1.offsetLeft;
//			 	var disY = e.clientY-odiv1.offsetTop;
//			 	document.onmousemove = function(e){
//			 		var e = e||event;
//			 		var moveX = e.clientX;
//			 		var moveY = e.clientY;
//			 		odiv1.style.left = moveX - disX+'px';
//			 		odiv1.style.top = moveY - disY +"px";
//			 	}
//			 	document.onmouseup = function(){
//			 		document.onmousemove = null;
//					document.onmousedown = null;
//			 	}
//			 	return false;
//			 }
//			 
//			 odiv2.onmousedown = function(e){
//			 	var e = e||event;
//			 	var disX = e.clientX - odiv2.offsetLeft;
//			 	var disY = e.clientY - odiv2.offsetTop;
//			 	document.onmousemove = function (e){
//			 		var e  = e||event;
//			 		var moveX = e.clientX;
//			 		var moveY = e.clientY;
//			 		var L = moveX - disX;
//			 		var T = moveY - disY;
//			 		if(L<0){
//			 			L=0;
//			 		}else if(L>oParent.offsetWidth - odiv2.offsetWidth){
//			 			L= oParent.offsetWidth - odiv2.offsetWidth;
//			 		}
//			 		if(T<0){
//			 			T=0
//			 		}else if(T>oParent.offsetHeight - odiv2.offsetHeight){
//			 			T=oParent.offsetHeight - odiv2.offsetHeight
//			 		}
//			 		odiv2.style.left = L+'px';
//			 		odiv2.style.top = T+'px';
//			 	}
//			 	document.onmouseup = function(){
//		 			document.onmousemove = null;
//					document.onmousedown = null;
//			 	}
//			 	return false;
//			 }
		</script>
		<script>
			//面向对象方法
			!(function(){
				function Drag(oParent,odiv){
					this.oParent = oParent;
					this.odiv = odiv;
					var _this = this;
					this.odiv.onmousedown = function(e){
						var e = e||event;
						_this.move(e);
					}
				}
				
				Drag.prototype.move = function(e){
				 	this.disX = e.clientX-this.odiv.offsetLeft;
				 	this.disY = e.clientY-this.odiv.offsetTop;
				 	var _this = this;
				 	document.onmousemove = function(e){
				 		var e = e||event;
				 		_this.onmove(e);
				 		return false;
				 	}
				 	document.onmouseup = function(){
				 		document.onmousemove = null;
						document.onmousedown = null;
						return false;
				 	}
				 	return false;
				};
				Drag.prototype.onmove = function(e){
					this.moveX = e.clientX;
			 		this.moveY = e.clientY;
			 		this.L = this.moveX - this.disX;
		 			this.T = this.moveY -this.disY;
		 			this.limit&&this.limit();
			 		this.odiv.style.left =this.L+'px';
			 		this.odiv.style.top = this.T+"px";
				};
				
				function Drag2(oParent,odiv){
					Drag.call(this,oParent,odiv)//继承私有
				};
				
				for (var key in Drag.prototype){//继承共有
			        Drag2.prototype[key] = Drag.prototype[key];
			   	};
				
				//扩展子类的方法
				Drag2.prototype.limit = function(){
					if(this.L<0){
			 			this.L=0;
			 		}else if(this.L>this.oParent.offsetWidth - this.odiv.offsetWidth){
			 			this.L= this.oParent.offsetWidth - this.odiv.offsetWidth;
			 		}
			 		if(this.T<0){
			 			this.T=0
			 		}else if(this.T>this.oParent.offsetHeight - this.odiv.offsetHeight){
			 			this.T=this.oParent.offsetHeight - this.odiv.offsetHeight;
			 		}
				};
				
				
				!(function(){
					var oParent = document.getElementById('parent');
			 		var odiv = document.getElementById('div1');
		 			new Drag(oParent,odiv);
				})();
				
				!(function(){
					var oParent = document.getElementById('parent');
			 		var odiv = document.getElementById('div2');
		 			new Drag2(oParent,odiv);
				})();
				
			})();
		</script>
	</body>
</html>
